<template>
  <div class="preview-mode">
    <!-- 预览工具栏 -->
    <div class="preview-toolbar">
      <div class="toolbar-left">
        <el-button @click="handleExitPreview" icon="el-icon-close" size="small">
          退出预览
        </el-button>
        <el-divider direction="vertical" />
        <span class="preview-title">{{ projectDetail?.title }} - 预览模式</span>
      </div>
      <div class="toolbar-right">
        <el-button-group size="small">
          <el-button 
            :type="viewMode === 'desktop' ? 'primary' : 'default'"
            @click="setViewMode('desktop')"
            icon="el-icon-monitor"
          >
            桌面
          </el-button>
          <!-- <el-button 
            :type="viewMode === 'tablet' ? 'primary' : 'default'"
            @click="setViewMode('tablet')"
            icon="el-icon-mobile-phone"
          >
            平板
          </el-button>
          <el-button 
            :type="viewMode === 'mobile' ? 'primary' : 'default'"
            @click="setViewMode('mobile')"
            icon="el-icon-mobile"
          >
            手机
          </el-button> -->
        </el-button-group>
        <el-divider direction="vertical" />
        <el-button @click="handleFullscreen" icon="el-icon-full-screen" size="small">
          全屏
        </el-button>
      </div>
    </div>

    <!-- 预览内容区 -->
    <div class="preview-content" :class="viewMode">
      <div class="preview-container" :style="containerStyle">
        <!-- 页面切换标签 -->
        <div class="page-tabs" v-if="pages.length > 1">
          <el-tabs v-model="currentPageIndex" @tab-change="handlePageChange">
            <el-tab-pane 
              v-for="(page, index) in pages"
              :key="page.id"
              :label="page.name"
              :name="index"
            />
          </el-tabs>
        </div>

        <!-- 页面内容 -->
        <div class="page-content" :style="pageStyle">
          <div 
            v-for="component in currentPageComponents"
            :key="component.id"
            class="preview-component"
            :style="getComponentStyle(component)"
          >
            <component 
              :is="getComponentTag(component.type)"
              :component-data="component"
              :preview-mode="true"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div class="loading-overlay" v-if="loading" v-loading="true">
      <div>加载中...</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
// 使用Element UI组件，无需额外导入
import type { ProjectDetail, ComponentConfig } from '../interface'

// 组件导入
import TextComponent from './components/TextComponent.vue'
import ImageComponent from './components/ImageComponent.vue'
import ChartComponent from './components/ChartComponent.vue'
import MapComponent from './components/MapComponent.vue'

// Props
interface Props {
  projectDetail: ProjectDetail | null
}

const props = defineProps<Props>()

// Emits
const emit = defineEmits<{
  exitPreview: []
}>()

// 响应式数据
const viewMode = ref<'desktop' | 'tablet' | 'mobile'>('desktop')
const currentPageIndex = ref(0)
const loading = ref(false)
const isFullscreen = ref(false)

// 计算属性
const pages = computed(() => {
  return props.projectDetail?.content?.pages || []
})

const currentPageComponents = computed(() => {
  if (!pages.value.length) return []
  const currentPage = pages.value[currentPageIndex.value]
  return currentPage?.components || []
})

const containerStyle = computed(() => {
  const styles: Record<string, any> = {
    desktop: {
      width: '100%',
      height: '100%',
      maxWidth: 'none',
    },
    tablet: {
      width: '768px',
      height: '1024px',
      maxWidth: '90%',
    },
    mobile: {
      width: '375px',
      height: '667px',
      maxWidth: '90%',
    }
  }
  
  return {
    ...styles[viewMode.value],
    margin: viewMode.value !== 'desktop' ? '20px auto' : '0',
    backgroundColor: '#fff',
    boxShadow: viewMode.value !== 'desktop' ? '0 4px 12px rgba(0, 0, 0, 0.15)' : 'none',
    borderRadius: viewMode.value !== 'desktop' ? '8px' : '0',
    overflow: 'hidden',
  }
})

const pageStyle = computed(() => {
  return {
    width: '100%',
    height: '100%',
    position: 'relative',
    background: props.projectDetail?.content?.settings?.background || '#fff',
  }
})

// 获取组件样式
const getComponentStyle = (component: ComponentConfig) => {
  const { position, style } = component
  
  // 根据视口模式调整组件大小
  let scale = 1
  if (viewMode.value === 'tablet') {
    scale = 0.8
  } else if (viewMode.value === 'mobile') {
    scale = 0.4
  }
  
  return {
    position: 'absolute',
    left: position.x * scale + 'px',
    top: position.y * scale + 'px',
    width: position.width * scale + 'px',
    height: position.height * scale + 'px',
    zIndex: style?.zIndex || 1,
    transform: `scale(${scale})`,
    transformOrigin: 'top left',
    ...style,
  }
}

// 获取组件标签
const getComponentTag = (type: string) => {
  const componentMap: Record<string, any> = {
    text: TextComponent,
    image: ImageComponent,
    'line-chart': ChartComponent,
    'bar-chart': ChartComponent,
    'pie-chart': ChartComponent,
    'base-map': MapComponent,
    'heat-map': MapComponent,
  }
  
  return componentMap[type] || TextComponent
}

// 设置视图模式
const setViewMode = (mode: 'desktop' | 'tablet' | 'mobile') => {
  viewMode.value = mode
}

// 处理页面切换
const handlePageChange = (index: number) => {
  currentPageIndex.value = index
}

// 退出预览
const handleExitPreview = () => {
  emit('exitPreview')
}

// 全屏切换
const handleFullscreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
    isFullscreen.value = true
  } else {
    document.exitFullscreen()
    isFullscreen.value = false
  }
}

// 监听全屏变化
const handleFullscreenChange = () => {
  isFullscreen.value = !!document.fullscreenElement
}

// 键盘事件处理
const handleKeyDown = (event: KeyboardEvent) => {
  if (event.key === 'Escape') {
    handleExitPreview()
  }
}

// 生命周期
onMounted(() => {
  document.addEventListener('fullscreenchange', handleFullscreenChange)
  document.addEventListener('keydown', handleKeyDown)
})

onUnmounted(() => {
  document.removeEventListener('fullscreenchange', handleFullscreenChange)
  document.removeEventListener('keydown', handleKeyDown)
})
</script>

<style lang="scss" scoped>
.preview-mode {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  display: flex;
  flex-direction: column;
  position: relative;
}

.preview-toolbar {
  height: 50px;
  background-color: #fff;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  .toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;

    .preview-title {
      font-size: 14px;
      color: #606266;
    }
  }

  .toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
  }
}

.preview-content {
  flex: 1;
  overflow: auto;
  padding: 20px;

  &.desktop {
    padding: 0;
  }

  &.tablet,
  &.mobile {
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
}

.preview-container {
  position: relative;
  transition: all 0.3s ease;
}

.page-tabs {
  border-bottom: 1px solid #e0e0e0;
  background-color: #fafafa;

  :deep(.el-tabs__header) {
    margin: 0;
  }

  :deep(.el-tabs__nav-wrap) {
    padding: 0 16px;
  }
}

.page-content {
  overflow: hidden;
}

.preview-component {
  transition: all 0.3s ease;
  pointer-events: none; // 预览模式下禁用交互
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

// 响应式设计
@media (max-width: 768px) {
  .preview-toolbar {
    padding: 0 12px;
    
    .toolbar-left .preview-title {
      display: none;
    }
  }
  
  .preview-content {
    padding: 10px;
  }
}
</style>
